<template>
  <div class="login_body">
    <!-- 左边背景图 -->
    <div class="bg" />
    <!-- 右边一个登录表单 -->
    <div class="box">
      <div class="title">智慧园区-登录</div>
      <!-- elementui 中提供的一个组件 => 表单结构 -->
      <!--
        form组件 => 自带表单校验 => 配置规则
          el-form  :model="表单数据对象"  :rules="规则对象"
          el-form-item  prop='要校验的字段名'
          el-input     v-model='xxx'
       -->
      <el-form ref="xxx" :model="form" :rules="rules">
        <el-form-item
          label="账号"
          prop="username"
        >
          <el-input v-model="form.username" />
        </el-form-item>

        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input v-model="form.password" type="password" />
        </el-form-item>

        <!-- <el-form-item label="年龄">
          <el-input />
        </el-form-item> -->

        <!-- <el-form-item label="银行卡号">
          <el-input type="password"/>
        </el-form-item> -->

        <el-form-item prop="remember">
          <el-checkbox v-model="flag">记住我</el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="login_btn" @click="login">登录</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
/*
  浏览器一刷新 默认情况下会重新执行代码

  细节: 如果需要记住密码效果 一定是当前这个登录账号被存了下来 =>

  前端本地存储(存储数据->永久存储/有效期内存储):
  1. localStorage => 永久存储
  2. sessionStorage => 关闭页面后就没了
  3. cookie => 永久存储/有效期内存储  存储量小(一般适用于数据少)
  4. ...

    localStorage.setItem('ee', '123')
    localStorage.setItem('ee', JSON.stringify(obj))

    localStorage.getItem('bb')
    JSON.parse(localStorage.getItem('bb'))

    localStorage.removeItem('bb')

    localStorage.clear()
*/
import { loginAPI } from '@/api/user'
export default {
  name: 'Login',
  // 提供数据
  data() {
    return {
      flag: false, // 记住我

      form: {
        username: '',
        password: ''
      },
      // 提供规则
      rules: {
        // 校验用户名
        username: [
          // 非空校验 => 失去焦点时检查用户有没有填写用户名 如果没有 请给一个提示 '用户名必须填写'
          { required: true, message: '用户名必须填写', trigger: 'blur' },
          // 长度校验 必须是5-12位字符以
          { min: 5, max: 12, message: '用户名必须5-12位', trigger: 'blur' }
        ],
        // 校验密码
        password: [
          // 非空校验
          { required: true, message: '你密码都不填', trigger: 'blur' },
          // 8-12
          { min: 8, max: 12, message: '长度为8-12', trigger: 'blur' }
        ]
      }
    }
  },

  // 生命周期函数 => 特定的时机触发
  mounted() {
    // 页面加载好之后触发
    // console.log('页面加载好了....')

    // 检查一下本地存储有没有我们想要的数据 如果有 说明存过 => 取出来用一用
    const temp = localStorage.getItem('form')
    // console.log(temp)
    if (temp) {
      this.form.username = JSON.parse(temp).username // 让用户名显示
      this.form.password = JSON.parse(temp).password // 让密码显示
      this.flag = true // 记住我打上勾
    }
  },

  // 提供函数 提供逻辑
  methods: {
    login() {
      console.log(this.flag)
      // console.log(this.form) // 拿到这个数据 可以调用上午封装好的loginAPI进行登录 loginAPI(this.form)

      // 登录请求之前需要对整个表单进行整体校验 => 需要用到form组件的一个方法 => 获取到form组件(添加ref)
      // this.$refs.名字 => 拿到组件 => 调用组件身上的方法 validate
      this.$refs.xxx.validate((ok) => {
        // console.log(ok)
        if (ok) {
          // 整体校验通过后 进行登录请求
          loginAPI(this.form).then((res) => {
            // console.log(res.data.token) // 用户身份的标识
            // 存仓库 => 如何调用仓库mutation函数
            // this.$store.commit('模块名/mutation名', 参数)
            this.$store.commit('user/setToken', res.data.token) // $store是vuex插件提供的一个属性指向仓库本身
            // setToken(res.data.token)

            // 跳转首页
            this.$router.push('/') // $router是vuerouter插件提供的一个属性指向路由实例
            // 提示
            this.$message.success('恭喜登录成功') // $message是elementui插件提供的一个属性指向一个对象(身上有很多提示的方法)

            // 到这说明登录成功了 拿到token了 => 登录成功过的账号如果之前点过记住我 那么将当前这个账号存储到本地
            if (this.flag) {
              // localStorage.setItem('username', this.form.username)
              // localStorage.setItem('password', this.form.password)
              localStorage.setItem('form', JSON.stringify(this.form))
            }
          })
        }
      })

      // 进行登录请求
      // loginAPI(this.form).then((res) => {
      //   console.log(res.data.token) // 用户身份的标识
      // })
    }
  }

}

</script>

<style scoped lang="scss">
  .login_body {
    display: flex;
  }
  .bg {
    width: 60vw;
    height: 100vh;
    background: url('~@/assets/login-bg.svg') no-repeat;
    background-position: right top;
    background-size: cover;
  }
  .box {
    margin: 200px 10% 0;
    flex: 1;
    .title {
      padding-bottom: 76px;
      font-size: 26px;
      font-weight: 500;
      color: #1e2023;
    }
    ::v-deep() {
      .ant-form-item {
        display: flex;
        margin-bottom: 62px;
        flex-direction: column;
      }
      .ant-form-item-label label {
        font-size: 16px;
        color: #8b929d;
      }
      .ant-input,
      .ant-input-password {
        border-radius: 8px;
      }
    }
  }
  .login_btn{
    width: 100%;
  }
</style>
